<template>
  <div class="goods-box">
    <nav-header></nav-header>
    <nav-bread>
      <span class="bread-item">Goods</span>
    </nav-bread>
    <div class="goods-list">
      <div class="goods-content">
        <div class="filter">
          <span>Sort by :</span>
          <a 
            href="javascript:void(0)"
            :class="sortActive ==  true ? 'active' : 'default'"
            @click="handleSortDefaultClick(sortActive)"
          >Default</a>
          <a 
            href="javascript:void(0)" 
            @click="handleSortPriceClick(sortActive)"
            :class="sortActive ==  true ? 'default' : 'active'"
          >Price{{arrow}}</a>
        </div>
        <div class="filter-content">
          <div class="filter-price">
            <span class="price-title">Price:</span>
            <ul class="price-zone">
              <li @click="priceActive=='all'">
                <a 
                  href="javascript:void(0)" 
                  :class="priceActive=='all'?'price-active':''" 
                >ALL
                </a>
              </li>
              <li 
                v-for="(item, index) of priceList" 
                :key="index" 
                @click="priceLevel(index)"
              >
                <a href="javascript:void(0)" 
                  @click="priceActive = index" 
                  :class="priceActive==index ? 'price-active' : ''"
                >{{item.price}}</a>
              </li>
            </ul>
          </div>
          <div class="filter-goods">
              <ul class="goods-total">
                <li class="goods-item" v-for="item of GoodsList" :key="item.productId">
                  <div class="goods-img">
                    <a href="#">
                      <!-- <img src="/static/image/1.jpg" alt=""> -->
                      <img v-lazy="'/static/image/'+item.productImage" alt="">
                    </a>
                  </div>
                  <div class="goods-desc">
                    <div class="goods-name">{{item.productName}}</div>
                    <div class="goods-price">￥{{item.salePrice}}</div>
                    <el-button class="goods-btn" @click="handleCartList(item.productId)">加入购物车</el-button>
                    <!-- <el-button class="goods-btn" :plain="true" @click="handleCartList(item.productId)">加入购物车</el-button> -->
                  </div>
                </li>
              </ul>
              <div 
                class="load-more" 
                v-infinite-scroll="loadMore" 
                infinite-scroll-disabled="busy" 
                infinite-scroll-distance="30"
                v-show="isLoading"
              >
                <img src="../../static/loading-svg/loading-bubbles.svg" alt="">
              </div>
          </div>
        </div>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>
<script>
import NavHeader from '@/components/Header'
import NavFooter from '@/components/Footer' 
import NavBread from '@/components/Bread'

export default {
  name: 'GoodsList',
  components: {
    NavHeader,
    NavFooter,
    NavBread
  },
  data () {
    return {
      arrow: '↑',
      sortActive: true,
      priceActive: 'all',
      priceList: [
        {
          price: '0.00-100.00'
        },
        {
          price: '100.00-500.00'
        },
        {
          price: '500.00-1000.00'
        },
        {
          price: '1000.00-5000.00'
        }
      ],
      GoodsList: [],
      sortFlag: true,
      page: 1,
      pageSize: 8,
      // busy 为 true 则关闭 infiniteScroll
      busy: true,
      Level: 4,
      isLoading: true
    }
  },
  methods: {
    getGoodsList (flag) {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        sort: this.sortFlag?1:-1,
        priceLevel: this.Level
      }
      this.$axios.get('/api/goods/list',{
        params: param
      }).then((res)=>{
        let data = res.data
        if(data.status == '0') {
          if(flag) {
            this.GoodsList = this.GoodsList.concat(data.result.list)
            if (data.result.count == 0 || data.result.count < 8) {
              this.busy = true
              this.isLoading = false
            } else { 
              this.busy = false
              }
          } else {
            this.GoodsList = data.result.list
            this.busy = false
          }

        } else {
          this.GoodsList = []
        }
      })
    },
    handleSortDefaultClick(sortActive) {
      this.sortActive = true
    },
    handleSortPriceClick(sortActive) {
      if(this.arrow == '↓') {
        this.arrow = '↑'
      } else this.arrow = '↓'
      this.sortActive = false
      this.sortFlag = !this.sortFlag
      this.page = 1
      this.getGoodsList()
    },
    loadMore () {
      this.busy = true
      // 为了防止不停请求服务器造成服务器压力过大
      setTimeout(()=>{
        this.page++
        this.getGoodsList(true)
      },500)
    },
    priceLevel (index) {
      this.page = 1
      this.Level = index
      this.getGoodsList()
    },
    handleCartList (productId) {
      this.$axios.post('/api/goods/cartList', {productId:productId}).then((res)=>{
        if(res.data.status == 0) {
          this.$message({
            message: '添加购物车成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '添加失败！当前未登录！',
            type: 'error'
          })
        }
      })
    }
   },
  mounted() {
    this.getGoodsList()
  }
}
</script>

<style lang="stylus" scoped>
  .goods-box
    background #f5f7fc
    font-size 14px
    .bread-item
      color #409eff
    .goods-list 
      max-width 100%
      height auto
      .goods-content
        max-width 1260px
        margin 0 auto
        .filter
          width 100%
          height 55px
          line-height 55px
          padding 0 20px
          margin 60px 0 30px
          background #fff
          text-align right
          box-sizing border-box
        .filter a
          margin 0 10px
        .active
          color #409eff
        .default
          color black
        .filter-content
          display flex
          .filter-price
            min-height 180px
            width 230px
            box-sizing border-box
            padding 0 20px
            color #605f5f
            transition right .5s ease-out
            .price-zone li
              margin 20px 0
              cursor pointer
            .price-zone li a:hover
              transition padding-left .3s ease-out
              border-left 2px solid #409eff
              padding-left 15px
              color #409eff
            .price-title
              margin-bottom: 30px;
              font-family: moderat,sans-serif;
              letter-spacing: .25em;
              text-transform: uppercase;
              font-weight: 700;
            .price-active
              color #409eff
              font-weight bold
          .filter-goods
            flex 1
            .goods-total
              display flex
              flex-wrap wrap
            .load-more
              height 100px
              line-height 100px
              text-align center
            .load-more img
              width 50px
              height 50px
            .goods-total li:hover
              -webkit-transform translateY(-5px)
              transform translateY(-5px)
              box-shadow 0 0 10px #409eff
              box-sizing border-box
              transition all .3s ease-out
            .goods-item
              overflow hidden
              transition all .5s ease-out
              width 23%
              margin-left 2%
              margin-bottom 1.5873%
              background #fff
              .goods-img img
                width 100%
              .goods-desc
                width 100%
                padding 20px 10px 10px
                box-sizing border-box
                .goods-name
                  width 215px
                  height 56px
                  color #605f5f
                  font-weight bold
                .goods-price
                  line-height 30px
                  color #d1434a
                  font-size 16px
                  margin 10px 0
                .goods-btn
                  width 100%
                  height 40px
                  display inline-block
                  text-align center
                  font-size 14px
                  font-family moderat,sans-serif
                  font-weight 700
                  border 1px solid #d1434a
                  color #d1434a
                  text-transform uppercase
                  letter-spacing .25em
                  white-space nowrap
                  cursor pointer
                .goods-btn:hover
                  background #ffe5e6
                  transition all .3s ease-out             
</style>
